<!--
学习时的艰辛是暂时的,未学到则未来的艰辛是终生的.
-->
<template>
  <div class="player">
    <normal-player :totalTime="totalTime" :currentTime="currentTime"></normal-player>
    <mini-player></mini-player>
    <list-player ref="listPlayer"></list-player>
    <audio :src="currentSong.url" ref="audio" @timeupdate="timeupdate" @ended="end"></audio>
  </div>
</template>

<script>

import NormalPlayer from "../components/Player/NormalPlayer";
import MiniPlayer from "../components/Player/MiniPlayer";
import ListPlayer from "../components/Player/ListPlayer";
import {mapGetters, mapActions} from "vuex"
import {getRandomInt, setLocalStorage, getLocalStorage} from '../tools/tools'


export default {
  name: "Player",
  components: {
    NormalPlayer,
    MiniPlayer,
    ListPlayer
  },
  methods: {
    ...mapActions([
      'setCurrentIndex',
      'setFavoriteList',
      'setHistorySong',
      'setHistoryList',
    ]),
    timeupdate(e) {
      // console.log(e.target.currentTime);
      this.currentTime = e.target.currentTime
    },
    end() {
      // console.log('end');
      if (this.modeType === 0) {         // loop
        // console.log('loop');
        this.setCurrentIndex(this.currentIndex + 1)
      } else if (this.modeType === 1) {  // one
        // console.log('one');
        this.$refs.audio.play()
      } else if (this.modeType === 2) {  // random
        // console.log('random');
        let index = getRandomInt(0, this.songs.length - 1)
        this.setCurrentIndex(index)
      }
    },
  },
  computed: {
    ...mapGetters([
      'currentSong',
      'isPlaying',
      "currentIndex",
      'curTime',
      'modeType',
      'songs',
      'favoriteList',
      'historyList'
    ])
  },
  watch: {
    isPlaying(newValue, oldValue) {
      if (newValue) {
        this.setHistorySong(this.currentSong)
        this.$refs.audio.play();
      } else {
        this.$refs.audio.pause();
      }
    },
    currentIndex() {
      this.$refs.audio.ondurationchange = () => {
        this.totalTime = this.$refs.audio.duration
        if (this.isPlaying) {
          this.setHistorySong(this.currentSong)
          this.$refs.audio.play()
        } else {
          this.$refs.audio.pause()
        }
      }
    },
    curTime(newValue, oldValue) {
      this.$refs.audio.currentTime = newValue;
    },
    favoriteList(newValue, oldValue) {
      setLocalStorage('favoriteList', newValue)
    },
    historyList(newValue, oldValue) {
      setLocalStorage('historyList', newValue)
    },
  },
  created() {
    let favoriteList = getLocalStorage('favoriteList')
    if (favoriteList === null) return
    this.setFavoriteList(favoriteList)

    let historyList = getLocalStorage('historyList')
    if (historyList === null) return
    this.setHistoryList(historyList)

  },
  mounted() {
    this.$refs.audio.ondurationchange = () => {
      // console.log('执行了1')
      this.totalTime = this.$refs.audio.duration
    }
  },
  data() {
    return {
      totalTime: 0,
      currentTime: 0
    }
  }

}
</script>

<style scoped lang="scss">
.player {
}
</style>
